<template>
<div class="app-container">
  <el-form ref="form" :model="form" :rules="rules" label-width="110px">
    <el-row :gutter="10" class="mb8" v-if="!disabled">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddFlowNode">添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteFlowNode">删除</el-button>
      </el-col>
    </el-row>
    <el-table :data="nodeList" :row-class-name="rowFlowNodeIndex"
              @selection-change="handleFlowNodeSelectionChange" ref="flowNode">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="序号" align="center" prop="index" width="50"/>
      <el-table-column label="结点类型" prop="nodeType" width="130">
        <template slot-scope="scope">
          <el-select v-model="scope.row.nodeType" placeholder="请选择结点类型"  :disabled="disabled">
            <el-option
              v-for="dict in dict.type.node_type"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="结点名称" prop="nodeName" width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.nodeName" :disabled="disabled"/>
        </template>
      </el-table-column>
      <el-table-column label="结点编码" prop="nodeCode" width="100">
        <template slot-scope="scope">
          <el-input v-model="scope.row.nodeCode" :disabled="disabled"/>
        </template>
      </el-table-column>
      <el-table-column label="权限标识" prop="permissionFlag" width="200">
        <template slot-scope="scope">
          <el-select v-model="scope.row.permissionFlag" multiple collapse-tags
              :disabled="scope.row.nodeType == 2" :clearable="!disabled" filterable>
            <el-option-group
              v-for="groupOption in groupOptions"
              :key="groupOption.label"
              :label="groupOption.label"
              :disabled="disabled">
              <el-option
                v-for="item in groupOption.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="跳转规则" prop="skipDescribe">
        <template slot-scope="scope">
          <el-input v-model="scope.row.skipDescribe" :disabled="true" >
            <template slot="append" v-if="scope.row.id && scope.row.nodeType !== 2">
              <el-button
                size="mini"
                type="text"
                :disabled="disabled"
                icon="el-icon-setting"
                @click="skipRules(scope.row.id, scope.row.nodeType)"
                v-hasPermi="['flow:definition:skip']"
              ></el-button>
            </template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <div slot="footer" class="dialog-footer" style="text-align: center;margin-left:-100px;margin-top:10px;">
    <el-button type="primary" v-if="!disabled" @click="submitForm">提交</el-button>
  </div>
  <SkipDialog ref="dialog" @refresh="getList"></SkipDialog>
</div>
</template>

<script>

import {getNodeList, saveNode} from "@/api/flow/definition";
import SkipDialog from "@/views/flow/definition/skipDialog";
import { listRole } from '@/api/system/role'
import { listUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'

export default {
  name: "Design",
  dicts: ['node_type'],
  components: {
    SkipDialog
  },
  data() {
    return {
      // 是否禁用表单
      disabled: false,
      // 子表选中数据
      checkedFlowNode: [],
      // 流程结点表格数据
      nodeList: [],
      definitionId: null,
      groupOptions: [],
      // 权限标识选项
      permissionOptions: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // flowCode: [
        //   { required: true, message: "流程编码不能为空", trigger: "blur" }
        // ],
        // version: [
        //   { required: true, message: "流程版本不能为空", trigger: "blur" }
        // ],
        // isPublish: [
        //   { required: true, message: "是否发布不能为空", trigger: "change" }
        // ],
      }
    };
  },
  created() {
    this.definitionId = this.$route.params && this.$route.params.id;
    if (this.$route.query.disabled == 'true') {
      this.disabled = true
    }
    if (this.definitionId) {
      // 获取表详细信息
      this.getList()
    }
    this.getPermissionFlag();
  },
  methods: {
    getList() {
      // 获取表详细信息
      getNodeList(this.definitionId).then(res => {
        this.nodeList = res.data;
        this.nodeList.map(item => {
          if (item.permissionFlag) {
            item.permissionFlag = item.permissionFlag.split(",")
          }
        })
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.nodeList.map(item => {
            item.permissionFlag = item.permissionFlag.join()
          })
          saveNode(this.nodeList, this.definitionId).then(response => {
            this.$modal.msgSuccess("保存成功");
            if (response.code === 200) {
              this.close();
            }
          });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/flow/definition", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    },
    /** 流程结点序号 */
    rowFlowNodeIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 流程结点添加按钮操作 */
    handleAddFlowNode() {
      let obj = {};
      obj.nodeType = "";
      obj.nodeName = "";
      obj.nodeCode = "";
      this.nodeList.push(obj);
    },
    /** 流程结点删除按钮操作 */
    handleDeleteFlowNode() {
      if (this.checkedFlowNode.length == 0) {
        this.$modal.msgError("请先选择要删除的流程结点数据");
      } else {
        const nodeList = this.nodeList;
        const checkedFlowNode = this.checkedFlowNode;
        this.nodeList = nodeList.filter(function(item) {
          return checkedFlowNode.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleFlowNodeSelectionChange(selection) {
      this.checkedFlowNode = selection.map(item => item.index)
    },

    skipRules(id, nodeType) {
      this.$refs.dialog.show(id, nodeType);
    },

    /** 选择角色权限范围触发 */
    getPermissionFlag() {
      listRole().then(response => {
        let groupOption = {
          label: '角色',
          options: response.rows.map(item =>{
              return {
                value: 'role:' + item.roleId,
                label: item.roleName
              }
            }
          )
        }
        this.groupOptions.push(groupOption);
      });
      listUser().then(response => {
        let groupOption = {
          label: '用户',
          options: response.rows.map(item =>{
              return {
                value: 'user:'+ item.userId,
                label: item.nickName
              }
            }
          )
        }
        this.groupOptions.push(groupOption);
      });
      listDept().then(response => {
        let groupOption = {
          label: '部门',
          options: response.data.map(item =>{
              return {
                value: 'dept:' + item.deptId,
                label: item.deptName
              }
            }
          )
        }
        this.groupOptions.push(groupOption);
      });
    },
  },
}
</script>
